<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title or "个人博客" }}</title>
    <meta name="description" content="{{ description or "个人博客系统" }}">
    <meta name="keywords" content="{{ keywords or "博客,个人博客,技术博客" }}">
    
    <!-- Tailwind CSS CDN -->
    <script src="{{ url_for('static', filename='js/tailwind.min.js') }}"></script>
    
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="/static/css/style.css">
    
    <!-- 额外的CSS -->
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 头部导航 - 使用 Tailwind CSS -->
    <header class="bg-white shadow-lg border-b border-gray-200">
        <nav class="max-w-7xl mx-auto px-8">
            <div class="flex justify-between items-center h-16">
                <!-- Logo -->
                <a href="{{ url_for('main.index') }}" class="flex items-center text-xl font-bold text-gray-800 hover:text-blue-600 transition-colors">
                    <img src="/static/images/logo.svg" alt="个人博客" class="h-24 w-24">
                </a>
                
                <!-- 搜索框 -->
                <div class="flex-1 max-w-md mx-8">
                    <form id="search-form" action="/search" method="GET" class="relative">
                        <input type="text" id="search-input" name="q" placeholder="搜索文章..." 
                               class="w-full px-4 py-2 pl-10 pr-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <button type="submit" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>
                
                <!-- 导航菜单 -->
                <div class="flex items-center space-x-6">
                    <a href="{{ url_for('main.index') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                        <i class="fas fa-home mr-1"></i>首页
                    </a>
                    <a href="{{ url_for('main.about') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                        <i class="fas fa-user mr-1"></i>关于
                    </a>
                    <a href="{{ url_for('main.contact') }}" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
                        <i class="fas fa-envelope mr-1"></i>联系
                    </a>
                    
                    {% if current_user.is_authenticated %}
                               <!-- 管理面板下拉菜单 -->
                               <div class="relative group">
                                   <button class="flex items-center space-x-1 text-gray-700 hover:text-blue-600 font-medium transition-colors">
                                       <i class="fas fa-cog mr-1"></i>
                                       <span>管理</span>
                                       <i class="fas fa-chevron-down text-xs"></i>
                                   </button>
                                   <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                                       <div class="py-2">
                                           <a href="{{ url_for('main.admin_dashboard') }}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors">
                                               <i class="fas fa-tachometer-alt mr-2"></i>管理后台
                                           </a>
                                           <div class="border-t border-gray-200 my-1"></div>
                                           <a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-red-600 hover:bg-red-50 transition-colors">
                                               <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                                           </a>
                                       </div>
                                   </div>
                               </div>
                    {% else %}
                        <a href="{{ url_for('auth.login') }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                            <i class="fas fa-sign-in-alt mr-1"></i>登录
                        </a>
                    {% endif %}
                </div>
            </div>
        </nav>
    </header>

    <!-- 主要内容 -->
    <main class="min-h-screen bg-gray-50">
        <div class="max-w-7xl mx-auto px-8 py-8">
            {% block content %}{% endblock %}
        </div>
    </main>

    <!-- 页脚 - 使用 Tailwind CSS -->
    <footer class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
        <div class="max-w-7xl mx-auto px-8 py-16">
            <!-- 主要内容区域 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <!-- 博客信息 -->
                <div class="space-y-6">
                    <div class="flex items-center space-x-3">
                        <img src="/static/images/logo.svg" alt="个人博客" class="h-10 w-10 brightness-0 invert">
                        <h3 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                            个人博客
                        </h3>
                    </div>
                    <p class="text-gray-300 leading-relaxed">
                        分享技术心得，记录生活感悟，用文字记录成长的足迹。
                    </p>
                    <div class="flex space-x-4">
                        <a href="https://github.com" target="_blank" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="https://twitter.com" target="_blank" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-blue-400 transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="mailto:contact@example.com" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-red-500 transition-colors">
                            <i class="fas fa-envelope"></i>
                        </a>
                    </div>
                </div>

                <!-- 快速导航 -->
                <div class="space-y-6">
                    <h4 class="text-xl font-semibold text-white">快速导航</h4>
                    <div class="space-y-3">
                        <a href="{{ url_for('main.index') }}" class="block text-gray-300 hover:text-blue-400 transition-colors">
                            <i class="fas fa-home mr-2"></i>首页
                        </a>
                        <a href="{{ url_for('main.about') }}" class="block text-gray-300 hover:text-blue-400 transition-colors">
                            <i class="fas fa-user mr-2"></i>关于我
                        </a>
                        <a href="{{ url_for('main.contact') }}" class="block text-gray-300 hover:text-blue-400 transition-colors">
                            <i class="fas fa-envelope mr-2"></i>联系我
                        </a>
                        <a href="/search" class="block text-gray-300 hover:text-blue-400 transition-colors">
                            <i class="fas fa-search mr-2"></i>搜索文章
                        </a>
                    </div>
                </div>

                <!-- 技术栈 -->
                <div class="space-y-6">
                    <h4 class="text-xl font-semibold text-white">技术栈</h4>
                    <div class="space-y-3">
                        <div class="flex items-center text-gray-300">
                            <i class="fab fa-python mr-2 text-green-400"></i>
                            <span>Python Flask</span>
                        </div>
                        <div class="flex items-center text-gray-300">
                            <i class="fab fa-js-square mr-2 text-yellow-400"></i>
                            <span>JavaScript</span>
                        </div>
                        <div class="flex items-center text-gray-300">
                            <i class="fab fa-css3-alt mr-2 text-blue-400"></i>
                            <span>Tailwind CSS</span>
                        </div>
                        <div class="flex items-center text-gray-300">
                            <i class="fas fa-database mr-2 text-orange-400"></i>
                            <span>SQLite</span>
                        </div>
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="space-y-6">
                    <h4 class="text-xl font-semibold text-white">博客统计</h4>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="text-center p-4 bg-gray-700 rounded-lg">
                            <div class="text-2xl font-bold text-blue-400" id="post-count">-</div>
                            <div class="text-sm text-gray-300">文章数量</div>
                        </div>
                        <div class="text-center p-4 bg-gray-700 rounded-lg">
                            <div class="text-2xl font-bold text-green-400" id="view-count">-</div>
                            <div class="text-sm text-gray-300">总浏览量</div>
                        </div>
                        <div class="text-center p-4 bg-gray-700 rounded-lg">
                            <div class="text-2xl font-bold text-purple-400" id="comment-count">-</div>
                            <div class="text-sm text-gray-300">评论数量</div>
                        </div>
                        <div class="text-center p-4 bg-gray-700 rounded-lg">
                            <div class="text-2xl font-bold text-yellow-400" id="tag-count">-</div>
                            <div class="text-sm text-gray-300">标签数量</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分割线 -->
            <div class="border-t border-gray-700 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <!-- 版权信息 -->
                    <div class="text-gray-400 text-sm">
                        <p>&copy; 2025 个人博客系统. 保留所有权利.</p>
                        <p class="mt-1">
                            基于 <a href="https://flask.palletsprojects.com/" target="_blank" class="text-blue-400 hover:text-blue-300">Flask</a> 构建 | 
                            主题灵感来自 <a href="https://hexo.io/" target="_blank" class="text-blue-400 hover:text-blue-300">Hexo</a>
                        </p>
                    </div>
                    
                    <!-- 友情链接 -->
                    <div class="flex items-center space-x-6 text-sm">
                        <a href="https://flask.palletsprojects.com/" target="_blank" class="text-gray-400 hover:text-white transition-colors">
                            Flask
                        </a>
                        <a href="https://tailwindcss.com/" target="_blank" class="text-gray-400 hover:text-white transition-colors">
                            Tailwind CSS
                        </a>
                        <a href="https://fontawesome.com/" target="_blank" class="text-gray-400 hover:text-white transition-colors">
                            Font Awesome
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="scroll-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition-all duration-300 opacity-0 invisible">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script src="/static/js/main.js"></script>
    
    <!-- 页脚统计数据加载 -->
    <script>
    // 加载博客统计数据
    document.addEventListener('DOMContentLoaded', function() {
        loadBlogStats();
    });
    
    function loadBlogStats() {
        // 获取文章数量
        fetch('/api/posts?per_page=1')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('post-count').textContent = data.data.pagination.total;
                }
            })
            .catch(error => console.log('获取文章数量失败'));
        
        // 获取标签数量
        fetch('/api/tags')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('tag-count').textContent = data.data.length;
                }
            })
            .catch(error => console.log('获取标签数量失败'));
        
        // 获取总浏览量和评论数量（这里需要后端提供统计API）
        // 暂时使用模拟数据
        document.getElementById('view-count').textContent = '1.2K';
        document.getElementById('comment-count').textContent = '56';
    }
    </script>
    
    <!-- 额外的JavaScript -->
    {% block extra_js %}{% endblock %}
</body>
</html>